<template>
  <div class="payment-container">
    <!-- 步骤1：入金方法选择 -->
    <div v-if="currentStep === 1" class="payment-form">
      <el-card class="payment-card">
        <template #header>
          <div class="card-header">
            <span>入金</span>
          </div>
        </template>

        <el-form :model="paymentForm" :rules="rules" ref="paymentFormRef" class="vertical-form" >
          <el-form-item label="入金方法の選択" prop="paymentMethod" >
            <el-select v-model="paymentForm.paymentMethod" placeholder="選択してください" style="width: 100%">
              <el-option label="日本円" value="jpy"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="金額" prop="amount">
            <div class="amount-input">
              <el-input v-model.number="paymentForm.amount" type="number" value="0" :min="1"></el-input>
              <span class="currency">円</span>
            </div>
          </el-form-item>
        </el-form>

        <!-- 费用明细表格 -->
        <div class="fee-details" v-if="paymentForm.amount">
          <div class="fee-item">
            <span class="fee-label">限界</span>
            <span class="fee-value">5,000円 - 10,000,000円</span>
          </div>
          <div class="fee-item">
            <span class="fee-label">手数料</span>
            <span class="fee-value">0円</span>
          </div>
          <div class="fee-item">
            <span class="fee-label">支払可能</span>
            <span class="fee-value">{{ paymentForm.amount || 1 }}円</span>
          </div>
          <div class="fee-item">
            <span class="fee-label">為替レート</span>
            <span class="fee-value">1円 = 1円</span>
          </div>
          <div class="fee-item">
            <span class="fee-label">円</span>
            <span class="fee-value">{{ paymentForm.amount || 1 }}円</span>
          </div>
        </div>

        <el-form-item>
          <el-button type="primary" @click="submitPaymentForm" style="width: 100%;background-color: #409EFF;" :loading="loading"
            :disabled="loading">提出する</el-button>
        </el-form-item>
      </el-card>
    </div>

    <!-- 步骤2：入金确认 -->
    <div v-if="currentStep === 2" class="payment-confirm">
      <el-card class="payment-card">
        <template #header>
          <div class="card-header">
            <span>入金確認</span>
          </div>
        </template>

        <div class="confirm-content">
          <p class="confirm-message">
            あなたがリクエストしました <span class="highlight">{{ paymentForm.amount }} JPY</span>, 支払ってください <span
              class="highlight">{{
                paymentForm.amount }}円</span>支払いが成功するために
          </p>

          <div class="bank-info" v-loading="loading">
            <div class="bank-info-item">
              <span class="label">金融機関名:</span>
              <span class="value">{{ bankInfo.bankName }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">支店名:</span>
              <span class="value">{{ bankInfo.branchName }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">支店番号:</span>
              <span class="value">{{ bankInfo.branchCode }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">取引種類:</span>
              <span class="value">{{ bankInfo.accountType }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">口座番号:</span>
              <span class="value">{{ bankInfo.accountNumber }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">フリガナ:</span>
              <span class="value">{{ bankInfo.accountNameKana }}</span>
            </div>
            <div class="bank-info-item">
              <span class="label">名義(漢字):</span>
              <span class="value">{{ bankInfo.accountName }}</span>
            </div>
          </div>

          <el-button type="primary" @click="confirmPayment" style="width: 100%; background-color: #409EFF; margin-top: 0px" :loading="loading"
            :disabled="loading">今払う</el-button>
          <!-- <el-button @click="currentStep = 1" style="width: 100%; margin-top: 10px" :disabled="loading">戻る</el-button> -->
        </div>
      </el-card>
    </div>

    <!-- 步骤3：完成 -->
    <!-- <div v-if="currentStep === 3" class="payment-complete">
      <el-card class="payment-card">
        <template #header>
          <div class="card-header">
            <span>入金完了</span>
          </div>
        </template>

        <div class="complete-content">
          <el-result icon="success" title="入金リクエストが送信されました" sub-title="管理者が確認後、入金が反映されます。">
            <template #extra>
              <el-button type="primary" @click="goToTransactions">マイページ</el-button>
            </template>
          </el-result>
        </div>
      </el-card>
    </div> -->
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { depositApi } from '../../../api/index'

const router = useRouter()
const currentStep = ref(1)
const paymentFormRef = ref(null)
const loading = ref(false)
const depositId = ref('')

// 银行信息
const bankInfo = ref({
  bankName: '',
  branchName: '',
  branchCode: '',
  accountType: '',
  accountNumber: '',
  accountNameKana: '',
  accountName: ''
})

// 表单数据
const paymentForm = reactive({
  paymentMethod: 'jpy',
  amount: ''
})

// 表单验证规则
const rules = {

}


// 提交表单
const submitPaymentForm = async () => {
  paymentFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        loading.value = true

        // 调用入金验证API
        const res = await depositApi.verifyDeposit({
          payment_method: paymentForm.paymentMethod,
          money: paymentForm.amount
        })

        if (res && res.code === 1) {
          // 更新银行信息
          const data = res.data
          bankInfo.value = {
            bankName: data.cz_jrjg || '',
            branchName: data.cz_fhmc || '',
            branchCode: data.cz_fhbh || '',
            accountType: data.cz_jylx || '',
            accountNumber: data.cz_zhmgh || '',
            accountNameKana: data.cz_jmzy || '',
            accountName: data.cz_myhz || ''
          }

          // 生成入金ID并进入确认页面
          depositId.value = 'DP' + Date.now()
          currentStep.value = 2
        } else {
          ElMessage.error(res?.msg || '入金リクエストの送信に失敗しました')
        }
      } catch (error) {
        console.error('提交入金请求失败:', error)
        ElMessage.error('入金リクエストの送信に失敗しました')
      } finally {
        loading.value = false
      }
    } else {
      ElMessage.error('入力内容を確認してください')
      return false
    }
  })
}

// 确认支付
const confirmPayment = async () => {
  try {
    loading.value = true

    // 这里可以添加确认入金的API调用
    // 目前直接进入完成页面
    setTimeout(() => {
      loading.value = false
      ElMessage.success('確認完了後、すぐに振込が完了します。')
    }, 500)
  } catch (error) {
    console.error('确认入金失败:', error)
    ElMessage.error('入金確認に失敗しました')
  } finally {
    loading.value = false
  }
}

// 跳转到交易记录页面
const goToTransactions = () => {
  router.push('/user/transactions')
}


</script>

<style scoped>
.payment-container {
  /* margin-top: 10px; */
  padding: 20px;
  max-width: 512px;
  margin: 0 auto;
}

.payment-steps {
  margin-bottom: 30px;
}

.payment-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-input {
  width: 100%;
  display: flex;
  align-items: center;
}

.currency {
  color: #92949a;
  border: 1px solid #dcdfe6;
  text-align: center;
  width: 54px;
  height: 32px;
  background-color: #dcdfe6;
}

.confirm-message {

  margin-bottom: 20px;
      font-size: 16px;
    line-height: 1em;
    color: #606975;
}

.highlight {
  color: #409EFF;
  font-weight: bold;
}

.bank-info {
  background-color: #ffffff;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.bank-info-item {
  display: flex;
  margin-bottom: 10px;
}

.label {
  width: 100px;
  /* font-weight: bold; */
    color: #606975;
    font-size: 12px;
}

.value {
  flex: 1;
    font-size: 12px;
    color: #606975;
}

.vertical-form :deep(.el-form-item) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vertical-form :deep(.el-form-item__label) {

  text-align: right;
  margin-bottom: 8px;
  padding: 0;
}

.vertical-form :deep(.el-form-item__label::before) {
  display: none !important;
}

.vertical-form :deep(.el-form-item__content) {
  width: 100%;
  margin-left: 0 !important;
}

.fee-details {
  /* background-color: #f8f9fa; */
  /* border: 1px solid #e9ecef; */
  border-radius: 4px;
  padding: 0;
  margin: 20px 0;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e9ecef;
}

.fee-item:last-child {
  border-bottom: none;
}

.fee-label {
  color: #495057;
  font-size: 12px;
  font-weight: 350;
}

.fee-value {
  color: #212529;
  font-size: 12px;
  font-weight: 400;
  text-align: right;
}
</style>